<template>
  <view class="container">
    <view class="success-icon">
      <view class="icon-circle">
        <view class="check-mark"></view>
      </view>
    </view>
    <view class="success-text">清理成功</view>
    <view class="action-button">
      <button @tap="clearCache" class="clear-btn">重新清理</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      
    };
  },
  onLoad() {
    // 页面加载时自动清理缓存
    this.clearCache();
  },
  methods: {
    clearCache() {
      // 调用缓存工具的clearAll方法清除所有缓存
      const result = this.$Cache.clearAll();
      if (result) {
        console.log('缓存清理成功');
        // 可以添加成功提示
        uni.showToast({
          title: '缓存清理成功',
          icon: 'success',
          duration: 2000
        });
      } else {
        console.log('缓存清理失败');
        // 添加失败提示
        uni.showToast({
          title: '缓存清理失败',
          icon: 'none',
          duration: 2000
        });
      }
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #ffffff;
}

.success-icon {
  margin-bottom: 30rpx;
}

.icon-circle {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  background-color: #4cd964;
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-mark {
  width: 60rpx;
  height: 100rpx;
  border: 8rpx solid #ffffff;
  border-left: none;
  border-top: none;
  transform: rotate(45deg);
  margin-top: -20rpx;
}

.success-text {
  font-size: 40rpx;
  color: #333333;
  margin-bottom: 80rpx;
}

.action-button {
  width: 400rpx;
}

.clear-btn {
  width: 100%;
  height: 100rpx;
  background-color: #ff3b30;
  color: #ffffff;
  font-size: 36rpx;
  border-radius: 50rpx;
  line-height: 100rpx;
}

button {
  background-color: #ff3b30 !important;
  color: #ffffff !important;
  border-radius: 50rpx !important;
}

button::after {
  border: none !important;
}
</style>